<template>
    <div class="mypicbox" @click="showFlag=true">
        <slot/>
    </div>
    <my-dailog v-if="showFlag" v-model:show="showFlag" :styleType="3" :showtopclose="true">
            <div class="mysjxzbox">
                <van-datetime-picker
                class="mydatetimepicker"
                v-model="currentDate"
                :minDate = 'minDate'
                type="datetime"
                @change="getDateTime"
                />
            </div>
    </my-dailog>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,watch,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import { DatetimePicker as vanDatetimePicker} from 'vant';
import moment from 'moment'
//import cutBorderBox from '@/components/cutBorderBox.vue' 
import myDailog from '@/components/myDailog.vue' 
export default {
    components:{
       vanDatetimePicker,
       //cutBorderBox,
       myDailog
    },
    props:{
        modelValue:'',
        minDate:'',
        maxDate:''
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            currentDate:new Date(),
           // minDate: new Date(),
           // maxDate: new Date(2025, 10, 1),
            showFlag:false
        })

        onMounted(()=>{
            if(props.modelValue){
                state.currentDate = new Date(props.modelValue)
            }
        })
        
        const getDateTime = dt=>{
           // dt && console.log("YYYY:",moment(dt).format('YYYY-MM-DD HH:mm'))
            if(dt){
                context.emit('update:modelValue', moment(dt).format('YYYY-MM-DD HH:mm'))
            }
        }

        return{
            ...toRefs(state),
            getDateTime
        }
    }
}
</script>

<style lang="scss" scoped>
    .mypicbox{
        display: block;
        width: 100%;
    }
    .mysjxzbox{
        width: 800px;
    }
</style>
<style lang="scss">
    .mydatetimepicker{
        background: none !important;
        .van-picker-column__item{
            color: #fff;
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
        }
        .van-picker__mask{
            background-image:linear-gradient(180deg, rgba(0, 51, 125, .9), rgba(0, 51, 125, .4)), 
            linear-gradient(0deg, rgba(0, 51, 125, .9), rgba(0, 51, 125, .4));
        }
        .van-hairline-unset--top-bottom:after{
            border-color:rgba(127, 158, 202,.3) ;
        }
        .van-picker__toolbar{
            visibility: hidden;
        }
    }
</style>